import React, { PureComponent } from "react";
import { renderRoutes } from 'react-router-config'

import routes from './router'

import {
    BrowserRouter,
    NavLink,
    Route,
    Switch,
    withRouter,
    
} from 'react-router-dom'
import About from "./pages/about";
import Home from "./pages/home";
import Profile from "./pages/profile";
import User from "./pages/user";
import Login from "./pages/login";
import Product from "./pages/product";
import Detail from "./pages/detail";
import Detail2 from "./pages/detail2";
import Detail3 from "./pages/detail3";

import './App.css'
import NoMatch from "./pages/noMatch";

class App extends PureComponent {


  render() {
    const id = 'abc';
    const info = {name: 'leon', age: 18, height: 1.88}

    return (
      <div>
        
          {/* <Link to='/'>首页</Link>
          <Link to='/about'>关于</Link>
          <Link to='/profile'>我的</Link> */}
          {/* <NavLink to='/' exact activeStyle={{color: "red"}}>首页</NavLink>
          <NavLink to='/about' activeStyle={{color: "red"}}>关于</NavLink>
          <NavLink to='/profile' activeStyle={{color: "red"}}>我的</NavLink> */}

          {/* 给活跃的a标签添加类名 */}
          <NavLink to='/' exact activeClassName="link-active">首页</NavLink>
          <NavLink to='/about' activeClassName="link-active">关于</NavLink>
          <NavLink to='/profile' activeClassName="link-active">我的</NavLink>
          <NavLink to='/abc' activeClassName="link-active">abc</NavLink>
          <NavLink to='/user' activeClassName="link-active">用户</NavLink>
          <NavLink to={`/detail/${id}`} activeClassName="link-active">详情</NavLink>
          <NavLink to={`/detail2?name=leon`} activeClassName="link-active">详情2</NavLink>
          <NavLink to={{
            pathname: "/detail3",
            search: "?name = abc",
            state: info
          }} activeClassName="link-active">详情3</NavLink>
          <button onClick={e => this.jumpToProduct()}>商品</button>


          {/* Switch组件的作用 */}
          {/* <Switch>
            <Route exact path="/" component={Home}></Route>
            <Route path="/about" component={About}></Route>
            <Route path="/profile" component={Profile}></Route>
            <Route path="/:id" component={User}></Route>
           
            <Route component={NoMatch}></Route>
          </Switch> */}


          {/* 这里不使用router文件夹下index.js */}
          {/* <Switch>
            <Route exact path="/" component={Home}></Route>
            <Route path="/about" component={About}></Route>
            <Route path="/profile" component={Profile}></Route>
            <Route path="/user" component={User}></Route>
            <Route path="/login" component={Login}></Route>
            <Route path="/product" component={Product}></Route>
            <Route path="/detail/:id" component={Detail}></Route>
            <Route path="/detail2" component={Detail2}></Route>
            <Route path="/detail3" component={Detail3}></Route>
            <Route component={NoMatch}></Route>
          </Switch> */}

          
          {renderRoutes(routes)}

      
      </div>
    )
  }

  jumpToProduct() {
    this.props.history.push('/product');
  }
} 

export default withRouter(App);